<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>08.vue中的样式-style</title>
  <script src="../../lib/vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 键名若有短横线，则必须有单引号 -->
    <!-- 短横线可以用小驼峰代替（JavaScript中） -->
    <!-- v-bind:style="对象" -->
    <h1 :style="{color:'red','font-weight': 200}">这是一个h1</h1>
    <!-- v-bind:style="data中的数据对象引用" -->
    <h1 :style="styleObj1">这是一个h1</h1>
    <!-- v-bind:style="数组（数组元素是data中的数据对象）" -->
    <h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
  </div>
</body>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      styleObj1: { color: 'red', 'font-weight': 200 },
      // 短横线可以用小驼峰代替（JavaScript中）
      styleObj2: { fontStyle: ' ' }
    }
  })
</script>

</html>